<template>
  <div>
    <el-dialog
      :modal="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="title"
      :visible.sync="visible"
      :width="width"
      :height="height"
      :top="top"
      :show-close="true"
      :custom-class="customClass"
      @close="close">
      <slot></slot>
  </el-dialog>  
</div>
</template>
<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: true
      },
      switchStyle: {
        type: Boolean,
        default: true
      },
      title: {
        type: String,
        default: '标题'
      },
      width: {
        type: String,
        default: "35%"
      },
      height: {
        type: String,
        default: "400px"
      },
      top: {
        type: String,
        default: "7vh"
      },
      isTab:{type:Boolean, default:false}, //是否是tab
    },
    data(){
      return {
        visible: this.isShow
      }
    },
    computed:{
      customClass: {
        get:function() {
          return this.isTab ? 'dialog-tab' : ''
        }
      }
    },
    methods: {
      close(){
        this.visible = false;
        this.$emit('resetForm')
        this.$emit('update:isShow', false)
      }
    },
    watch: {
      isShow () {
        this.visible = this.isShow
      }
    }  
  }
</script>
<style lang="less">
  .dialog-tab {
    .el-dialog__header {
      border-bottom: 0;
    }
    .el-dialog__body {
      padding-top: 0px;
    }
    .el-tabs__content {
      padding:10px 50px;
    }
  }
</style>
